<html lang="en">

<head>
    <title>乐摩吧-巡场签到</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

    <!-- <link href="css/mui.min.css" rel="stylesheet" /> -->
    <link href="css/reset.css" rel="stylesheet" />
    <link href="css/index.css?v=1" rel="stylesheet" />
    <link href="css/weui.min.css" rel="stylesheet" />
    <link href="css/iosOverlay.css" rel="stylesheet">
</head>

<body >
    <div class="viewport" id="dialogs">
        <div class="wrap" id="tab">
            <div class="header">
                <h2>巡场签到</h2>
                <p class="font13">用于巡场人员到达所负责网点现场后签到使用</p>
            </div>
            <div class="content">
                <div class="c-c">
                    <div>
                        <p class="areaname textright">申报人：</p>
                        <input id="username" type="text" class="input-border1 inputs-inner c-s" style="height:30px;" placeholder="请输入申报人信息">
                    </div>
                    <div class="margintop">
                        <p class="areaname textright">区域名称：</p>
                        <select name="请选择" id="zonename" style="height:30px;" class="c-s" onchange='chooseArea(this[selectedIndex].value);'>
                            <option value="0">请选择...</option>
                            <option value="1">台晋商圈</option>
                            <option value="2">五四北商圈</option>
                            <option value="3">万宝商圈</option>
                            <option value="4">八一七路</option>
                            <option value="5">华林五四</option>
                            <option value="6">仓山</option>
                            <option value="7">闽侯</option>
							<option value="8">马尾</option>
                            <!-- <option value="8">福清</option>
                            <option value="10">平潭</option>
                            <option value="11">长乐</option>
                            <option value="12">连江</option> -->
                        </select>
                        <input id="zoneName" type="hidden" value="">
                    </div>
                    <div class="margintop">
                        <p class="areaname textright">网点名称：</p>
                        <select name="请选择" id="areaname" class="c-s" style="height:30px;">
                            <option value="0">请选择...</option>
                        </select>
                    </div>
                </div>
                <h4 class="labels">签到信息</h4>
                <div class="c-c">
                    <div class="margintop">
                        <p class="areaname textright">现场设备数：</p>
                        <input id="deviceNum" type="number" pattern="[0-9]*" class="input-border1 inputs-inner c-s" style="height:30px;">
                    </div>
                    <div class="margintop">
                        <p class="areaname textright">巡场反馈：</p>
                        <textarea name="" id="feedBack" cols="30" rows="10" style="width:66%;height:150px;"></textarea>
                    </div>
                </div>
                <h4 class="labels">图片上传（最多上传9张图）</h4>
                <p class="p-tips">TIPS：请在实施前/后各拍一张区域全局图！</p>
                <div class="c-c" style="width:80%;margin:0 auto;float:left;margin-bottom:10px;" id="touchImg">
                    <div class="dd" id="mm" style="float:left;" >
                        <input type="file" name="file"  class="input-border1 add-img" width="50" value="+" multiple="multiple" onchange="UpdateFile(this)" />
                    </div>
                </div>
                <div class="c-c" style="width:80%;margin:0 auto;    padding: 10px 30px;">
                    <input id="btnSubmit" type="button" class="btn-submit" onclick="submitForm()" value="巡检完成">
                </div>
            </div>
            <div class="footer">
                2018乐摩物联 版权所有<br>闽ICP备12018069号-5
            </div>
        </div>
        <div class="js_dialog" id="iosDialog2" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                
                <div class="weui-dialog__bd" id="toastMsg"></div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="hideMsg()">知道了</a>
                </div>
            </div>
        </div>

        <div class="js_dialog" id="iosDialog1" style="display: none;">
            <div class="weui-mask"></div>
            <div class="weui-dialog">
                <div class="weui-dialog__hd"><strong class="weui-dialog__title">是否删除图片</strong></div>
                <div class="weui-dialog__bd">确定删除当前图片吗？</div>
                <div class="weui-dialog__ft">
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" onclick="cancelDetelePhoto()">取消</a>
                    <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" onclick="sureDetelePhoto()">确定</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>


<script src="js/mui.min.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>


<script>
    function showMsg(msg){
        $('#iosDialog2').css({'display':'block'});
        $('#toastMsg').text(msg);
        // document.getElementById('iosDialog2').style = 'display:block';
        // document.getElementById('toastMsg').innerHTML = msg;
        // setTimeout(function(){
        //     document.getElementById('iosDialog2').style = 'display:none';
        // }, 1500)
    }
    function hideMsg(msg){
        $('#iosDialog2').css({'display':'none'});
        $('#toastMsg').text('');
        // document.getElementById('iosDialog2').style = 'display:none';
        // document.getElementById('toastMsg').innerHTML = '';
    }
    //下拉框数据
    function chooseArea(vals) {
        var html = "";
        $("#zoneName").val('');
        switch (vals) {
            case '1':
                $("#zoneName").val('台晋商圈');
                // html =  '<option value="请选择...">请选择...</option>';
                html = '<option value="汉堡王旁">汉堡王旁</option>';
                html += '<option value="APM广场4楼:5">APM广场4楼:5</option>';
                html += '<option value="台江万达5楼-2">台江万达5楼-2</option>';
                html += '<option value="APM广场">APM广场</option>';
                html += '<option value="台江万达1楼咕叽咕叽">台江万达1楼咕叽咕叽</option>';
                // html += '<option value="L3大丰收对面">L3大丰收对面</option>';
                html += '<option value="L3百货超市">L3百货超市</option>';
                html += '<option value="L4adidas">L4adidas</option>';
                // html += '<option value="台江万达3楼">台江万达3楼</option>';
                html += '<option value="福州台江中兴主题影院">福州台江中兴主题影院</option>';
                html += '<option value="福州元洪">福州元洪</option>';
                html += '<option value="东百元洪3F-b15">东百元洪3F-b15</option>';
                html += '<option value="世纪联华中亭街店3楼入口">世纪联华中亭街店3楼人口</option>';
                html += '<option value="福州MINI纯K">福州MINI纯K</option>';
                html += '<option value="福州新华都同德店">福州新华都同德店</option>';
                html += '<option value="福州晋安区泰达汽车">福州晋安区泰达汽车</option>';
                html += '<option value="福州蓝调东泰禾店">福州蓝调东泰禾店</option>';
                html += '<option value="福州福新卓越台球">福州福新卓越台球</option>';
                html += '<option value="福州讲堂前朵尚皮肤">福州讲堂前朵尚皮肤</option>';
                html += '<option value="世欧王庄北区3楼咕叽咕叽">世欧王庄北区3楼咕叽咕叽</option>';
                html += '<option value="世欧天虹百货 ">世欧天虹百货 </option>';
                html += '<option value="福州新华都火车站店 ">福州新华都火车站店 </option>';
                break;
            
            case '2':
                $("#zoneName").val('五四北商圈');
                html = '<option value="L5鱼旨寿司">L5鱼旨寿司</option>';
                html += '<option value="L5东北风">L5东北风</option>';
                html += '<option value="L4国美">L4国美</option>';
                html += '<option value="L2舒友">L2舒友</option>';
                html += '<option value="L2有唱">L2有唱</option>';
                html += '<option value="天街2楼咕叽咕叽">天街2楼咕叽咕叽</option>';
                html += '<option value="L5小猪小牛">L5小猪小牛</option>';
                html += '<option value="福州巨星台球五四北店">福州巨星台球五四北店</option>';
                html += '<option value="福州长兴通讯配件店">福州长兴通讯配件店</option>';
                break;
            case '3':
                $("#zoneName").val('万宝商圈');
                html = '<option value="万象城B1攀爬处">万象城B1攀爬处</option>';
                // html += '<option value="万象儿童乐园5楼办公室">万象儿童乐园5楼办公室</option>';
                html += '<option value="宝龙广场4楼蒸汽火锅旁">宝龙广场4楼蒸汽火锅旁</option>';
                html += '<option value="苏宁广场5楼D502">苏宁广场5楼D502</option>';
                html += '<option value="宝龙3楼老北京">宝龙3楼老北京</option>';
                html += '<option value="宝龙负一楼儿童乐园门口 ">宝龙负一楼儿童乐园门口 </option>';
                html += '<option value="宝龙负一楼楼蛙功夫">宝龙负一楼楼蛙功夫</option>';
                html += '<option value="万象4楼斗牛士">万象4楼斗牛士</option>';
                html += '<option value="万象4楼胖哥俩">万象4楼胖哥俩</option>';
                html += '<option value="万象4楼鸟匠">万象4楼鸟匠</option>';
                html += '<option value="福州新华都宝龙店L3">福州新华都宝龙店L3</option>';
                html += '<option value="宝龙负一楼咕叽咕叽">宝龙负一楼咕叽咕叽</option>';
                html += '<option value="中防万宝城负一楼193">中防万宝城负一楼193</option>';
                html += '<option value="中防万宝城B1楼006">中防万宝城B1楼006</option>';
                html += '<option value="中防万宝城B2楼277">中防万宝城B2楼277</option>';
                html += '<option value="苏宁B1麦丹劳">苏宁B1麦丹劳</option>';
                break;
            case '4':
                $("#zoneName").val('八一七路');
                html = '<option value="福州南街大洋">福州南街大洋</option>';
                html += '<option value="福州大洋百货正大广场">福州大洋百货正大广场</option>';
                html += '<option value="福州世贸星天地负一楼">福州世贸星天地负一楼</option>';
                html += '<option value="福州白马卓越台球">福州白马卓越台球</option>';
                html += '<option value="福州星际迷航台球店">福州星际迷航台球店</option>';
                
                break;
            case '5':
                $("#zoneName").val('华林五四');
                html = '<option value="福州温泉路春秋百福茶叶店">福州温泉路春秋百福茶叶店</option>';
                html += '<option value="福州新金门一层">福州新金门一层</option>';
                html += '<option value="福州新金门一层 小姐房">福州新金门一层 小姐房</option>';
                html += '<option value="福州追浪网咖">福州追浪网咖</option>';
                html += '<option value="福州曼都发型美容国色天香店">福州曼都发型美容国色天香店</option>';
                html += '<option value="福州省体高尔夫">福州省体高尔夫</option>';
                break;
            case '6':
                $("#zoneName").val('仓山');
                html = '<option value="福州91车饰">福州91车饰</option>';
                html += '<option value="福州全兴网咖">福州全兴网咖</option>';
                html += '<option value="福州车况宝检测服务中心">福州车况宝检测服务中心</option>';
                html += '<option value="福州橡树湾彩票会所">福州橡树湾彩票会所</option>';
                html += '<option value="福州世纪金源三楼石锅鱼旁">福州世纪金源三楼石锅鱼旁</option>';
                html += '<option value="福州世纪金源三楼小鱼小牛旁">福州世纪金源三楼小鱼小牛旁</option>';
                html += '<option value="福州世纪金源二楼川味火锅旁">福州世纪金源二楼川味火锅旁</option>';
                html += '<option value="福州星牌台球">福州星牌台球</option>';
                html += '<option value="爱沫影院爱情海店01">爱沫影院爱情海店01</option>';
                html += '<option value="福州万达play1">福州万达play1</option>';
                html += '<option value="仓山万达1楼咕叽咕叽">仓山万达1楼咕叽咕叽</option>';
                html += '<option value="福州世纪金福广场">福州世纪金福广场</option>';
                html += '<option value="福州QD创意园20栋1楼大厅">福州QD创意园20栋1楼大厅</option>';
                html += '<option value="福州仓山亿融汽车">福州仓山亿融汽车</option>';
                html += '<option value="福州中瑞正荣大地影院">福州中瑞正荣大地影院</option>';
                html += '<option value="福州仓山江南主题酒店大堂">福州仓山江南主题酒店大堂</option>';
                html += '<option value="福州仓山建新养老中心">福州仓山建新养老中心</option>';
                break;
            case '7':
                $("#zoneName").val('闽侯');
                html = '<option value="福州盈众大众">福州盈众大众</option>';
                html += '<option value="福州燕林国际影城">福州燕林国际影城</option>';
                html += '<option value="福州永嘉天地B1">福州永嘉天地B1</option>';
                html += '<option value="福州新华都上街店">福州新华都上街店</option>';
                html += '<option value="福州九龙美盛">福州九龙美盛</option>';
                html += '<option value="福州山亚国际中心">福州山亚国际中心</option>';
                html += '<option value="福州永嘉天地大丰收旁">福州永嘉天地大丰收旁</option>';
                html += '<option value="福州永嘉天地爱婴室旁">福州永嘉天地爱婴室旁</option>';
                html += '<option value="福州永嘉天地桥亭活鱼旁">福州永嘉天地桥亭活鱼旁</option>';
                html += '<option value="福州闽侯东方医院大厅">福州闽侯东方医院大厅</option>';
                html += '<option value="福州闽侯上街鲤鱼洲宾馆">福州闽侯上街鲤鱼洲宾馆</option>';
                html += '<option value="福州闽侯信通新华都">福州闽侯信通新华都</option>';
                break;
			case '8':
               $("#zoneName").val('马尾');
               html = '<option value="马尾中环广场永辉">马尾中环广场永辉</option>';
            // case '7':
            //     $("#zoneName").val('闽清');
            //     html = '<option value="福州闽清七叠温泉">福州闽清七叠温泉</option>';
            //     break;
            // case '8':
            //     $("#zoneName").val('福清');
            //     html = '<option value="福州福清裕荣汇">福州福清裕荣汇</option>';
            //     html += '<option value="福州福清欧尚超市">福州福清欧尚超市</option>';
            //     html += '<option value="福州福清渔溪东成车美">福州福清渔溪东成车美</option>';
            //     html += '<option value="福州福清真正美车会所">福州福清真正美车会所</option>';
            //     html += '<option value="福州福清广益建材尚高">福州福清广益建材尚高</option>';

            //     break;
            // case '9':
            //     $("#zoneName").val('马尾');
            //     html = '<option value="马尾中环广场永辉">马尾中环广场永辉</option>';

            //     break;
            // case '10':
            //     $("#zoneName").val('平潭');
            //     html = '<option value="福州平潭新华都东大店">福州平潭新华都东大店</option>';
            //     break;
            // case '11':
            //     $("#zoneName").val('长乐');
            //     html = '<option value="福州长乐安平广场">福州长乐安平广场</option>';
            //     html += '<option value="福州长乐永辉吴航店">福州长乐永辉吴航店</option>';
            //     break;
            // case '12':
            //     $("#zoneName").val('连江');
            //     html = '<option value="福州万家城市广场">福州万家城市广场</option>';
            //     html += '<option value="福州永辉连江贵安店">福州永辉连江贵安店</option>';
            //     break;
            default:
                break;
        }
        document.getElementById('areaname').innerHTML = html;
    }
    
    var elfileNum = 0;
    var gotNum = 0;//获取到的图片数
    var UpdateFile = function (el) {
        gotNum = 0;
        //$("#btnSubmit").attr('disabled', 'disabled');
        var imgContent = document.querySelectorAll('#touchImg>img').length;//当前的图片数
        var totalNum = 0;
        totalNum = imgContent + el.files.length;
        elfileNum = el.files.length;
        var oDiv1 = document.getElementById("mm");

        if (el.files.length > 0 ) { // && el.files.length <= 10
            for (var fl = 0; fl < el.files.length; fl++) {
                if (el.files[fl].size > 7 * 1024 * 1024) {
                    showMsg("上传的图片过大,请上传小于7M的照片!", 1);
                    return;
                }
            }
            var tlength = 0;  
            if(imgContent < 9){
                tlength = 9 - imgContent;
            } 
            for (var i = 0; i < tlength; i++) {
                if(i >= 9){
                    showMsg("最多只能传9张图!");
                    return;
                }else{
                    var k = 0;//为了防止图片id重复
                    var form = new FormData();
                    form.append("file", el.files[i]);
                    var UploadUrl = 'http://h5.test.sale.lemobar.cn/api/v1/checkFixDemo/img/upload'; // 接收上传文件的后台地址 
                    var xhr = new XMLHttpRequest();
                    xhr.open("post", UploadUrl);
                    xhr.onload = function (e) {
                        k++;
                        var FileData = JSON.parse(e.target.response);
                        if (FileData.code == '1') {
                            gotNum++;
                            var imgs = document.createElement('img');
                            imgs.setAttribute('class','fingleImg');
                            imgs.src = '';
                            imgs.src = FileData.data;
                            imgs.setAttribute('id',Date.parse(new Date())+k);
                            imgs.onclick = deletePhoto;
                            console.log(FileData.data);
                            document.getElementById('touchImg').insertBefore(imgs,oDiv1);
                        }
                    };
                    xhr.send(form);
                }
            }

        } else {
            $.alert("必须大于一张图片");
        }
        var photoAdd = document.getElementById('mm');
        if((imgContent + elfileNum) >= 9){
            photoAdd.style = 'display:none';
        }else{
            photoAdd.style = 'display:block;float:left;';
        }

        
    }

    function submitForm() {
        if(gotNum != elfileNum){
            $("#btnSubmit").attr('disabled', 'disabled');
            showMsg('图片正在上传，请稍等');
            $("#btnSubmit").removeAttr('disabled');
            return;
        }else{
            $("#btnSubmit").removeAttr('disabled');
        }

        if ($.trim($("#username").val()).length == 0) {
            showMsg("请输入申报人信息", 1);
            return;
        }

        if ($.trim($("#zoneName").val()).length == 0) {
            showMsg("请选择区域", 1);
            return;
        }
        if ($.trim($("#areaname").val()).length == 0) {
            showMsg("请选择网点", 1);
            return;
        }
        if ($.trim($("#deviceNum").val()).length == 0) {
            showMsg("请输入现场设备数", 1);
            return;
        }
        if ($.trim($("#feedBack").val()).length == 0) {
            showMsg("巡场反馈描述不能为空", 1);
            return;
        }
        
        $("#btnSubmit").attr('disabled', 'disabled');
        //$("#btnSubmit").attr('disabled', 'disabled');
        //window.setTimeout("$('#btnSubmitRepair').removeAttr('disabled');", 15000);

        //showMsg("提交中...", 3);
        //$("#btnSubmit").button('loading');


        var data = {
            create_persion: $("#username").val(),
            area: $("#areaname").val(),
            lattice_point: $("#zoneName").val(),
            amount: $("#deviceNum").val(),
            feed_back: $("#feedBack").val(),
            pic_url1: 'null',
            pic_url2: 'null',
            pic_url3: 'null',
            pic_url4: 'null',
            pic_url5: 'null',
            pic_url6: 'null',
            pic_url7: 'null',
            pic_url8: 'null',
            pic_url9: 'null',
        };
        var imgObj = document.querySelectorAll('#touchImg>img');
        var imgContent = imgObj.length;//当前的图片数
        for(var i = 0; i < imgContent; i++){
            data['pic_url' + (i+1)] = imgObj[i].src;
        }
        
        $.ajax({
            type: "post",
            url: 'http://h5.test.sale.lemobar.cn/api/v1/patrolPlaceDemo',
            data: data,
            // cache: false,
            //async: false,
            dataType: "json",
            success: function (obj) {
                if (obj.code == 1) {

                    $("#btnSubmit").attr('disabled', '');
                    showMsg("提交成功!", 2);
                    setTimeout(function(){
                        window.location.reload();
                    },3000)
                    
                } else {
                    showMsg("提交失败", 1);
                }
            },
            error: function (data, text) {

                console.log(data);
            }
        });
    }
    

    
    var ids = '';
    //取消删除图片
    function cancelDetelePhoto(){
        $('#iosDialog1').css({'display':'none'});
        // document.getElementById('iosDialog1').style = 'display:none';
    }

    //确定删除图片
    function sureDetelePhoto(){
        var photoAdd = document.getElementById('mm');
        $('#'+ids).remove();
        var imgContent = document.querySelectorAll('#touchImg>img').length;//当前的图片数
        
        if((imgContent) == 9){
            photoAdd.style = 'display:none';
        }else{
            photoAdd.style = 'display:block;float:left;';
        }
        $('#iosDialog1').css({'display':'none'});
    }
    function deletePhoto(obj) {
        $('#iosDialog1').css({'display':'block'});
        // document.getElementById('iosDialog1').style = 'display:block';
        ids = obj.currentTarget.id;
        
    }
    function isInt(val) {
                var re = /^[0-9]+.?[0-9]*$/;   //判断字符串是否为数字     //判断正整数 /^[1-9]+[0-9]*]*$/   
                if (re.test(val)) {
                    if (val % 1 === 0) {
                        return true;
                    }
                    else {
                        return false;
                    }
                }
                else {
                    return false;
                }
            }
</script>